/**
* @作者:晋尧
* @创建时间：2021/7/7
* @修改时间：2021/7/10
*/

<template>
	<view class="main">
		<!-- 头部导航栏 -->
		<view class="header">
			<img src="/static/xiangzulogo.png" style="width: 176rpx; height: 99rpx;" fit="cover" class="logo"
				@click="jumpToMain">
			<view class="navitems">
				<view class="navitem" @click="jumptoLogIn" v-if="!isLogin">登录</view>
				<el-badge :value="messageNum" class="navitem" v-if="isLogin" hidden="messageNum==0">
					<view @click="jumpToMessage">消息</view>
				</el-badge>
				<view class="navitem" @click="logOut" v-if="isLogin">退出登录</view>
			</view>
		</view>
		<!-- 面包屑 -->
		<view class="breadcrumb">
			<view class="breadcrumb_content">
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item :to="{ path: 'Userindex'}" style="font-size: 17px">首页</el-breadcrumb-item>
					<el-breadcrumb-item :to="{ path: 'UserDetail?id1='+this.classname1+'&id2='+this.classname2}"
						v-if="flag" style="font-size: 17px">{{ classname1 }}/{{classname2 }}
					</el-breadcrumb-item>
					<el-breadcrumb-item style="font-size: 17px">{{goodsName}}</el-breadcrumb-item>
				</el-breadcrumb>
			</view>
		</view>
		<!-- 商品细节 -->
		<view class="detail">
			<!-- 商品图片 -->
			<view class="goodsImg">
				<el-image style="width: 400px; height: 400px" :src='"http:////47.96.168.135:7388"+imgSrc[0].url'
					:fit="contain"></el-image>
				<view>
					<view>
						<ul>
						</ul>
					</view>
				</view>
			</view>
			<!-- 商品信息 -->
			<view class="goodsParam">
				<div class="shopRow goodsParamHeight">
					<h2>{{ goodsName }}</h2>
				</div>
				<div class="shopRow goodsParamHeight">
					<el-button type="text" class="shop_button goodsParamHeight" @click="jumpToChat">
						<em>{{ shopName }}</em>
					</el-button>
				</div>

				<div class="descriptionRow goodsParamHeight">{{ description }}</div>

				<view class="prize_bar goodsParamHeight">
					<p>日租：</p>
					<div class="show_prize fl">￥<em>{{ settings[radio-1].price }}</em></div>

				</view>
				<view class="setting_bar goodsParamHeight">
					<p>选择配置：</p>
					<div class="show_row">
						<el-radio v-for="(setting,index) in settings" :key="index" v-model="radio" :label="index+1"
							border>{{ setting.value }}</el-radio>
					</div>
				</view>
				<view class="left_bar goodsParamHeight">
					<p>库存：</p>
					<div class="show_left fl">{{ settings[radio-1].stock }}</div>
				</view>
				<view class="time_bar goodsParamHeight">
					<p>租赁时间：</p>
					<el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期"
						end-placeholder="结束日期" class="show_date" :picker-options="pickerOptions"
						@change="handleDateChange">
					</el-date-picker>
				</view>
				<view class="num_bar goodsParamHeight">
					<p>数量：</p>
					<el-input-number v-model="num" @change="handleNumChange" :min="1" :max="settings[radio-1].stock"
						label="描述文字" class="show_num"></el-input-number>
				</view>
				<view class="button_bar goodsParamHeight">
					<el-button type="primary" class="show_button" title="加入购物车" @click="addShoppingCart">加入购物车
					</el-button>
					<el-button type="danger" class="show_button" v-if="settings[radio-1].stock != 0" title="直接租赁"
						@click="jumpToOrderConfirm">直接租赁
					</el-button>
					<el-button type="danger" class="show_button" disabled v-if="settings[radio-1].stock == 0"
						title="库存不足">直接租赁
					</el-button>
				</view>
			</view>
		</view>
		<!-- 用户操作按钮 -->
		<view class="pageButton">
			<view class="pageButton_content">
				<el-tabs v-model="activeName">
					<el-tab-pane label="商品详情" name="first">
						<view class="detailImg">
							<img v-for="(item,index) in imgSrc2" v-bind:key='index'
								:src='"http:////47.96.168.135:7388"+item.url' alt="" />
						</view>
					</el-tab-pane>
					<el-tab-pane :label='"用户评价("+commentsNum+")"' name="second">
						<view class="comment">
							<view class="comment_item" v-for="(item,index) in comment" v-bind:key="index">
								<view class="comment_user">
									<el-avatar :src='"http:////47.96.168.135:7388"+item.userImage' size="small">
									</el-avatar>
									<div style="margin-left: 20rpx; font-size: 17px;">{{ item.userName }}</div>
								</view>
								<view class="comment_star">
									<el-rate v-model="item.stars" disabled show-score text-color="#ff9900"
										score-template="{value}">
									</el-rate>
								</view>
								<view class="comment_content">
									{{ item.content }}
								</view>
								<el-divider></el-divider>
							</view>
						</view>
					</el-tab-pane>
				</el-tabs>
			</view>
		</view>
		<!-- 聊天窗口 -->
		<el-drawer :append-to-body="true" :visible.sync="innerDrawer" :before-close="handleClose" ref="drawer2">
			<view class="outer">
				<view class="uni-column">
					<view class="Drawerheader">{{name}}</view>
					<view class="content" id="content" :style="{height:style.contentViewHeight+'px'}">
						<scroll-view id="scrollview" scroll-y="true" :style="{height:style.contentViewHeight+'px'}"
							:scroll-with-animation="true" :scroll-top="scrollTop">
							<message-show v-for="(message,index) in pastrecord" :key="index" v-bind:message="message"
								:id="index"></message-show>
							<view id="bottom"></view>
						</scroll-view>
					</view>
					<view class="foot">
						<chat-input @send-message="getInputMessage"></chat-input>
					</view>
				</view>
			</view>
		</el-drawer>
	</view>
</template>

<script>
	import chatInput from '../../components/chatinput.vue';
	import messageShow from '../../components/messageshow.vue';
	export default {
		data() {
			return {
				shopuuid: '',
				sku: [],
				name: '',
				uuid: '',
				style: {
					pageHeight: 0,
					contentViewHeight: 0,
					footViewHeight: 90,
					mitemHeight: 0,
				},
				scrollTop: 0,
				friendlist: [],
				pastrecord: [],
				innerDrawer: false,

				drawer: false,
				baseurl: 'http://47.96.168.135:7388',
				isLogin: this.$cookies.isKey("userId"),
				flag: false,
				pageId: 1,
				shopId: 1,
				commentsNum: 1,
				comment: [{
					userImage: '',
					userName: '阿伟',
					stars: 4,
					content: '杰哥，这，这是什么啊',
				}],
				goodsName: 'default',
				shopName: 'default',
				description: 'default',
				radio: 1,
				num: 1,
				date: [],
				jsonDate: '',
				activeName: 'first',
				imgSrc: ['http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000614364454_4_800x800.jpg'],
				imgSrc2: ['http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000614364454_4_800x800.jpg'],
				arr: [],
				classname1: '1',
				classname2: '1',
				dateIsChanged: false,
				settings: [{
						value: "配置1",
						id: 1,
						price: 16,
						deposit: 1,
						leftnum: 100,
					},
					{
						value: "配置2",
						id: 2,
						price: 18,
						deposit: 1,
						leftnum: 10,
					},
					{
						value: "配置3",
						id: 3,
						price: 17,
						deposit: 1,
						leftnum: 1000,
					},
					{
						value: "配置4",
						id: 4,
						price: 8,
						deposit: 1,
						leftnum: 100,
					},
				],
				jsonSettings: '',
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() < Date.now() - 8.64e7;
					}
				},
			};
		},
		// 组件引入方法
		components: {
			chatInput,
			messageShow
		},
		// 页面加载方法
		created: function() {

			this.getData();
			this.judgeIsNull();
			const res = uni.getSystemInfoSync();
			this.style.pageHeight = res.windowHeight;
			this.style.contentViewHeight = res.windowHeight - uni.getSystemInfoSync().screenWidth / 750 * (100); //像素
		},
		// 页面加载方法2
		mounted: function() {
			this.getlist()
		},
		// 页面加载方法3
		onLoad: function(option) {
			this.pageId = option.id;
			this.classname1 = option.value1;
			this.classname2 = option.value2;
			this.date = JSON.parse(this.$cookies.get("date"))
			if (this.classname1 !== undefined && this.classname2 != '默认') {
				this.flag = true
			}
			/* //初始化websocket
			this.$websocket.dispatch('WEBSOCKET_INIT', "ws://47.96.168.135:5657/socket/" + this.$cookies.get(
				"useruuid"));
			var that = this; */
			//监听websocket
			uni.onSocketMessage(function(res) {
				var content = res.data.split("|")[0]
				var sender = res.data.split("|")[1]
				if (that.$cookies.get(sender) != null) {
					that.pastrecord = JSON.parse(that.$cookies.get(sender));
					that.$cookies.remove(sender)
				}
				that.pastrecord.push({
					user: "home",
					content: content,
					hasSub: false,
					subcontent: '',
				})
				that.$cookies.set(sender, JSON.stringify(that.pastrecord), "1h")
				that.$message({
					type: 'info',
					message: '有新消息！'
				});
				that.scrollToBottom();
			})
		},
		// 离开页面执行函数
		destroyed: function() {
			this.$cookies.remove("date")
			this.$cookies.remove("num")
			this.$cookies.remove("radio")
			this.$cookies.remove("isLoad")
		},
		// 页面展示函数
		onShow: function() {
			this.dateIsChanged = false
		},

		methods: {
			// 跳转到用户登录
			jumptoLogIn() {
				uni.redirectTo({
					url: 'UserLoginIndex'
				})
			},
			// 判断数据是否更改
			handleDateChange() {
				this.dateIsChanged = true
			},
			//向服务器请求商品数据
			async getData() {
				var that = this;
				// this.pageId=1;
				await this.$axios({
					methods: 'get',

					url: '/SKU/getOne?Id=' + this.pageId,

				}).then(res => {
					that.arr = res.data.date;
				}).catch(err => {

				})
				this.goodsName = that.arr.name;
				this.shopName = that.arr.storeName;
				this.shopId = that.arr.businessId;
				this.settings = that.arr.skuSpecificationOptions;
				this.description = that.arr.subTitle;
				this.imgSrc = that.arr.skuImages;
				this.imgSrc2 = that.arr.skuSpecificationImages;
				this.commentsNum = that.arr.commentNum;
				this.shopuuid = that.arr.businessuuid;
				this.comment.splice(0, 1, {
					userName: that.arr.comments[0].customerName,
					userImage: that.arr.comments[0].faceImageUrl,
					stars: that.arr.comments[0].point.value,
					content: that.arr.comments[0].detail,
				})
				if (this.commentsNum > 1) {
					for (var i = 1; i < this.commentsNum; i++) {
						this.comment.push({
							userName: that.arr.comments[i].customerName,
							userImage: that.arr.comments[i].faceImageUrl,
							stars: that.arr.comments[i].point.value,
							content: that.arr.comments[i].detail,
						})
					}
				}

			},
			//如果用户未选择租赁时间，打开弹窗
			openWindow() {
				this.$alert('请选择租赁时间！', '出问题啦', {
					confirmButtonText: '确定',
				});
			},
			//判断商品信息是否为空
			judgeIsNull() {
				if (this.goodsName == '') {
					this.goodsName = 'default'
				} else if (this.shopName == '') {
					this.shopName = 'default'
				} else if (this.settings == []) {
					this.settings = [{
						value: "配置1",
						id: 1,
						price: 16,
						stock: 100,
					}]
				} else if (this.description == '') {
					this.description = '111'
				} else if (this.imgSrc == '') {
					this.imgSrc = ''
				}

			},
			//计数器控制方法
			handleNumChange() {
				if (this.leftnum == 0) {
					num = 0;
				}
			},
			//加入购物车弹窗
			openaddShoppingWindow() {
				this.$notify({
					title: '成功',
					message: '您的商品已经进入购物车啦',
					type: 'success'
				});
			},
			//加入购物车方法
			async addShoppingCart() {
				if (!this.$cookies.isKey("userName")) {
					this.openRentWindow()
				} else {
					var that = this;
					// this.pageId=1;
					await this.$axios({
						methods: 'get',

						url: '/Customer/addShoppingCart?skuID=' + this.pageId.toString() + '&index=' + (this
							.radio - 1).toString() + '&Name=' + this.$cookies.get("userName")

					}).then(res => {
						if (res.data.date == true) {
							this.openaddShoppingWindow()
						} else {
							this.$alert('错误', '出错啦，加入购物车失败！', {
								confirmButtonText: '确定',
							});
						}
					}).catch(err => {

					})
				}
			},

			//时间转换方法
			tranformTime() {
				for (var i = 0; i < 2; i++) {
					var y = this.date[i].getFullYear()
					var m = this.date[i].getMonth() + 1
					m = m < 10 ? ('0' + m) : m
					var d = this.date[i].getDate()
					d = d < 10 ? ('0' + d) : d
					this.date[i] = y + '/' + m + '/' + d;
				}
			},
			//未登录打开弹窗方法
			openRentWindow() {
				this.$confirm('您尚未登录，是否登录？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					uni.navigateTo({
						url: "UserLoginIndex"
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消登录'
					});
				});
			},
			//直接租赁，跳转到订单确认页面
			jumpToOrderConfirm() {
				if (!this.$cookies.isKey("userName")) {
					this.openRentWindow()
				} else if (this.$cookies.isKey("userName") && this.date == null) {
					this.openWindow()
				} else if (this.$cookies.isKey("userName") && this.$cookies.get("isLoad") == "true" && this
					.dateIsChanged == false) {
					this.$cookies.set("radio", this.radio, "1h")
					this.$cookies.set("num", this.num, "1h")
					uni.navigateTo({
						url: 'ConfirmRentIndex'
					});
				} else {
					this.tranformTime()
					this.jsonSettings = JSON.stringify(this.settings)
					this.jsonDate = JSON.stringify(this.date)
					this.$cookies.set("goodsId", this.pageId, "1h")
					this.$cookies.set("goodsName", this.goodsName, "1h")
					this.$cookies.set("shopName", this.shopName, "1h")
					this.$cookies.set("description", this.description, "1h")
					this.$cookies.set("settings", this.jsonSettings, "1h")
					this.$cookies.set("radio", this.radio, "1h")
					this.$cookies.set("date", this.jsonDate, "1h")
					this.$cookies.set("num", this.num, "1h")
					this.$cookies.set("orderImg", this.imgSrc[0].url, "1h")
					uni.navigateTo({
						url: 'ConfirmRentIndex'
					});
				}
			},
			// 退出登录提示框
			openLogOutWindow() {
				this.$confirm('确定要退出登录吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$cookies.remove("userName")
					this.$cookies.remove("userId")
					this.$cookies.remove("userFaceImg")
					location.reload()
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消退出登录'
					});
				});
			},
			// 退出登陆方法
			logOut() {
				this.openLogOutWindow()
			},
			// 跳转到主界面
			jumpToMain() {
				uni.redirectTo({
					url: "Userindex"
				})
			},
			// 打开聊天窗口
			async jumpToChat() {
				if (!this.$cookies.isKey("userId")) {
					this.openRentWindow()
				} else {
					var that = this
					this.friendlist.forEach(function(friend) {
						if (friend.uuid == that.shopuuid) {
							that.pastrecord = JSON.parse(that.$cookies.get(that.shopuuid))
							that.innerDrawer = true;

							return
						}
					})

					await this.$axios({
						methods: 'get',

						url: '/Customer/AddNewBusiness?CustomerId=' + this.$cookies.get("userId") +
							"&BusinessId=" + this.shopId,

					}).then(res => {

					})
					this.innerDrawer = true;
				}
			},
			// 关闭聊天窗口
			handleClose(done) {

				this.pastrecord = [];
				done();
			},
			//获取消息界面输入框的输入数据
			getInputMessage: function(message) {


				this.addMessage('customer', message.content, false);
				this.postmessage(message.content);
			},
			//消息记录存入本地
			addMessage: function(user, content, hasSub, subcontent) {
				var that = this;
				if (this.$cookies.get(this.shopuuid) != null) {
					this.pastrecord = JSON.parse(this.$cookies.get(this.shopuuid))
					this.$cookies.remove(this.shopuuid)
				}
				this.pastrecord.push({
					user: user,
					content: content,
					hasSub: false,
					subcontent: subcontent
				})

				this.$cookies.set(this.shopuuid, JSON.stringify(this.pastrecord), "1h")

			},

			//移至消息界面底部
			scrollToBottom: function() {
				var that = this;
				var query = uni.createSelectorQuery();
				query.selectAll('.m-item').boundingClientRect();
				query.select('#scrollview').boundingClientRect();

				query.exec(function(res) {
					that.style.mitemHeight = 0;
					res[0].forEach(function(rect) {
						that.style.mitemHeight = that.style.mitemHeight + rect.height + 20;
					});

					if (that.style.mitemHeight > that.style.contentViewHeight) {
						that.scrollTop = that.style.mitemHeight - that.style.contentViewHeight;
					}
				});
			},
			//将输入消息发送到websocket服务器
			postmessage: function(info) {
				this.$websocket.dispatch("WEBSOCKET_SEND", info + "|" + this.$cookies.get("useruuid") + "|" + this
					.shopuuid);
			},

			//获取消息界面好友列表
			async getlist() {
				await this.$axios({
					methods: 'get',
					url: '/Customer/getAllBusiness?CustomerId=' + this.$cookies.get("userId"),

				}).then(res => {
					this.friendlist = res.data.date
				})
			},
			//切换好友消息页面窗口
			jumptoChat(uuid, name) {
				this.uuid = uuid;
				this.name = name;
				this.innerDrawer = true
				var that = this
				this.friendlist.forEach(function(friend) {
					if (friend.uuid == uuid) {
						that.$cookies.set("senderimg", friend.faceUrl, "1h")
					}
				})

				if (this.$cookies.get(uuid) != null) {

					this.pastrecord = (JSON.parse(this.$cookies.get(uuid)))
				};
			},
		},
	};
</script>

<style>
	.main {
		display: flex;
		flex-direction: column;
		position: absolute;
		width: 100%;
		justify-content: center;
		align-items: center;
		float: left;
	}

	/* 顶栏style */
	.header {
		width: 100%;
		height: 99rpx;
		display: flex;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		position: relative;
		z-index: 10;
	}

	.logo {
		margin-left: 5%;
	}

	.navitems {
		margin: auto;
		display: flex;
		margin-right: 5%;
	}

	.navitem {
		font-size: 15px;
		margin-left: 50rpx;
	}

	.searchColumn {
		background-color: white;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search {
		margin-top: 15rpx;
		background: #2f3640;
		height: 50rpx;
		border-radius: 10rpx;
		padding: 10rpx;
		width: 900rpx;
		margin-bottom: 15rpx;
		display: flex;
		align-items: center;
	}

	.searchInput {
		padding: 0;
		color: white;
		font-size: 35rpx;
		transition: 0.4s;
		line-height: 35rpx;
		width: 800rpx;
	}

	.search-btn {
		float: right;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-color: gray;
		display: flex;
		justify-content: center;
		align-items: center;
		transform: translateX(10rpx);
	}

	.search:hover>.search-btn {
		background: white;
	}

	.swiperimg {
		width: 100%;
		height: 100%;
	}

	.breadcrumb {
		width: 100%;
		transform: translateX(100px);
		background-color: #EEEEEE;
		height: 30px;
		transform: translateX(-0px);
		margin-top: 50rpx;
	}

	.detail {
		width: 100%;
		height: 300px;
		display: flex;
		background-color: white;
		transform: translateY(20px);
	}

	.goodsImg {
		width: 300px;
		height: 300px;
		float: left;
		transform: translateX(200px);
	}

	.goodsImg_content {
		margin-left: 40px;
		max-width: 400px;
		width: expression(this.width>300?"300px":this.width);
		max-height: 400px;
		height: expression(this.height>300?"300px":this.height);
	}

	.goodsParam {
		float: right;
		width: 700px;
		height: 300px;
		transform: translateX(400px);
	}

	.prize_bar {
		width: 100%;
		display: flex;
		padding-left: 0px;
	}

	.show_prize {
		font-size: 20px;
		color: #ff3e3e;
		padding-left: 50px
	}

	.goodsParamHeight {
		height: 60px;
	}

	.setting_bar {
		display: flex;
		padding-left: 0px;
	}

	.show_row {
		padding-left: 20px;
		display: flex;
		width: 300rpx;
		flex-direction: row;
	}

	.descriptionRow {
		width: 100%;
		float: left;
		transform: translateY(5px);
	}

	.time_bar {
		display: flex;
		padding-left: 0px;
	}

	.show_date {
		margin-left: 20px;
	}

	.num_bar {
		display: flex;
		padding-left: 0px;
	}

	.show_num {
		margin-left: 50px;
	}

	.button_bar {
		display: flex;
		padding-left: 0px;
	}

	.show_button {
		height: 50px;
		width: 200px;
	}

	.pageButton {
		width: 100%;
		height: 40px;
		background-color: #EEEEEE;
		transform: translateY(220px);
	}

	.breadcrumb_content {
		display: flex;
		width: 100%;
		transform: translateX(240px);
		margin-top: 0.1cm;
	}

	.pageButton_content {
		margin-left: 240px;

	}

	.goodsImgBar {
		background-color: #EEEEEE;
		width: 400px;
		margin-top: 20px;
		height: 100px;
		transform: translateX(30px);
		position: relative;
	}

	.ImgList {
		height: 100%;
		width: 100%;
		overflow: hidden;
		position: absolute;
	}

	.listItem {
		width: 20%;
		height: 100%;
	}

	.show_left {
		font-size: 20px;
		padding-left: 50px;
	}

	.left_bar {
		display: flex;
		padding-left: 0px;
	}

	.shopRow {
		width: 50%;
		float: left;
		display: flex;
	}

	.show_radioButton {
		margin-left: 10px;
	}

	.detailImg {
		width: 70%;
	}

	.comment {
		height: 1000px;
	}

	.comment_item {
		width: 60%;
		height: 300rpx;
		margin-top: 25rpx;
		display: flex;
		flex-direction: column;
	}

	.comment_user {
		display: flex;
		align-items: center;
		float: left;
		background-color: white;
		height: 40rpx;
	}

	.comment_star {
		background-color: white;
		margin-top: 10rpx;
		height: 40rpx;
	}

	.comment_content {
		font-size: 13px;
		height: 150rpx;
		margin-top: 20rpx;
	}

	.fl {
		float: left;
	}

	.fr {
		float: right;
	}

	.outer {
		background: #2e2f3d;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 10rpx;
	}

	.uni-column {

		width: 80%;


		display: flex;
		background: #fafafa;
		flex-direction: column;
	}

	.Drawerheader {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		border-bottom: 1rpx gray solid;
		height: 50rpx;
		margin-top: 5rpx;
		padding-bottom: 5rpx;
	}

	.content {

		width: 100%;
		height: 50%;

		display: flex;



	}

	.foot {

		width: 100%;
		height: 100rpx;



	}

	.text {
		margin-left: 30rpx;
		font-size: 35rpx;
	}

	.perRow {
		width: 100%;
		display: flex;
		flex-direction: row;

		align-items: center;
		height: 120rpx;
		border-bottom: 1rpx solid gray;
	}

	.drawermain {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.img {
		margin: 10rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
	}

	.tac {
		width: 30%;
		margin: 0 0 0 0;
		margin-left: 30rpx;

	}
</style>
